Client-side Router Cache

warning.icon Next 15 から Page コンポーネントでの Client-side Route Cache がデフォルトで無効になった

When navigating between pages via <Link> or useRouter, page segments are no longer reused from the client-side router cache.

However, they are still reused during browser backward and forward navigation and for shared layouts.

layout.tsx や loading.tsx では引き続き有効

以前と同じ動作にするには、next.config.js に exprimental.staleTimes を指定する必要がある

code:next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {

experimental: {

staleTimes: {

dynamic: 30,

static: 180,

}

module.exports = nextConfig

概要

Next.js の 4 種類のキャッシュの 1 つで、ナビゲーション時のサーバリクエストを減らすことを目的とする

RSC Payload を Router ごとにクライアント側（インメモリ）で保持する

これによりページナビゲーションの高速化が期待できる

インメモリなので、ページ更新（router.refresh）などでクリアされる

ページアクセスだけでなく、<Link> コンポーネントや router.prefetch によってもキャッシュが生成される

warning.icon Prefetch は本番環境でのみ有効

prefetch を指定しなかった場合: 30 秒

prefetch={true] や router.prefetch: 5 分間

キャッシュを無効にする方法

On-demand Revalidation を有効にしている

cookies.set や cookies.delete を使用している

2. router.refresh を用いた場合